<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>关键词</title>
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
			}
			ul,
			li {
				margin: 0px;
				padding: 0px;
			}
			.mui-bar-nav~.mui-content {
				padding-top: 84px;
				height: 100%;
				background-color: #fff;
			}
			/*attr*/
			
			.hotel-attr-btn-area {
				position: absolute;
				top: 44px;
				height: 40px;
				line-height: 40px;
				left: 0px;
				width: 100%;
				border-radius: 0px;
				margin: 0px;
				padding: 0px;
				font-size: 0px;
			}
			.hotel-attr-btn-area:after {
				position: absolute;
				right: 0px;
				left: 0px;
				bottom: 0px;
				height: 1px;
				content: '';
				background-color: #c8c7cc;
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
			}
			.hotel-attr-btn-area li {
				display: inline-block;
				width: 33.3%;
				text-align: center;
				margin: 0px;
				font-size: 14px;
				position: relative;
				color: #777;
			}
			.hotel-attr-btn-area li i.fa {
				margin-left: 5px;
			}
			.hotel-attr-btn-area li.active {
				color: #099FDE !important;
			}
			.hotel-attr-btn-area li.active:after {
				content: '';
				position: absolute;
				height: 2px;
				background: #099fde;
				left: 0px;
				right: 0px;
				bottom: 0px;
			}
			/*tab*/
			
			.hotel-tab {
				width: 100%;
				height: 100%;
				padding-left: 80px;
				position: relative;
			}
			.hotel-tab-btn-area {
				width: 80px;
				height: 100%;
				position: relative;
				overflow: auto;
				position: absolute;
				top: 0px;
				left: 0px;
			}
			.hotel-tab-btn-area:after {
				position: absolute;
				top: 0px;
				right: 0px;
				bottom: 0px;
				width: 1px;
				height: 1000px;
				content: '';
				background-color: #c8c7cc;
				-webkit-transform: scaleX(.5);
				transform: scaleX(.5);
			}
			.hotel-tab-btn-area li {
				height: 50px;
				line-height: 50px;
				text-align: center;
				position: relative;
				background-color: #f5f5f5;
			}
			.hotel-tab-btn-area li.active {
				background-color: #fff;
			}
			.hotel-tab-btn-area li:after {
				position: absolute;
				right: 0px;
				left: 0px;
				bottom: 0px;
				height: 1px;
				content: '';
				background-color: #c8c7cc;
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
			}
			.hotel-tab-panel-area {
				height: 100%;
				overflow: auto;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">关键词</h1>
		</header>
		<ul class="hotel-attr-btn-area">
			<li class="active">可预定<i class="fa fa-circle"></i></li>
			<li>有特价<i class="fa fa-circle-o"></i></li>
			<li>立即确认<i class="fa fa-circle-o"></i></li>
		</ul>
		<div class="mui-content">
			<div class="hotel-tab">
				<div class="hotel-tab-btn-area">
					<ul>
						<li>item-1</li>
						<li class="active">item-2</li>
						<li>item-3</li>
						<li>item-4</li>
						<li>item-5</li>
						<li>item-6</li>
						<li>item-7</li>
						<li>item-8</li>
						<li>item-9</li>
						<li>item-10</li>
						<li>item-11</li>
						<li>item-12</li>
						<li>item-13</li>
						<li>item-14</li>
						<li>item-15</li>
						<li>item-16</li>
						<li>item-17</li>
						<li>item-18</li>
						<li>item-19</li>
						<li>item-20</li>
					</ul>
				</div>
				<div class="hotel-tab-panel-area">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">item-1</li>
						<li class="mui-table-view-cell">item-2</li>
						<li class="mui-table-view-cell">item-3</li>
						<li class="mui-table-view-cell">item-4</li>
						<li class="mui-table-view-cell">item-5</li>
						<li class="mui-table-view-cell">item-6</li>
						<li class="mui-table-view-cell">item-7</li>
						<li class="mui-table-view-cell">item-8</li>
						<li class="mui-table-view-cell">item-9</li>
						<li class="mui-table-view-cell">item-10</li>
						<li class="mui-table-view-cell">item-11</li>
						<li class="mui-table-view-cell">item-12</li>
						<li class="mui-table-view-cell">item-13</li>
						<li class="mui-table-view-cell">item-14</li>
						<li class="mui-table-view-cell">item-15</li>
						<li class="mui-table-view-cell">item-16</li>
						<li class="mui-table-view-cell">item-17</li>
						<li class="mui-table-view-cell">item-18</li>
						<li class="mui-table-view-cell">item-19</li>
						<li class="mui-table-view-cell">item-20</li>
						<li class="mui-table-view-cell">item-21</li>
						<li class="mui-table-view-cell">item-22</li>
						<li class="mui-table-view-cell">item-23</li>
						<li class="mui-table-view-cell">item-24</li>
						<li class="mui-table-view-cell">item-25</li>
						<li class="mui-table-view-cell">item-26</li>
						<li class="mui-table-view-cell">item-27</li>
						<li class="mui-table-view-cell">item-28</li>
						<li class="mui-table-view-cell">item-29</li>
						<li class="mui-table-view-cell">item-30</li>
						<li class="mui-table-view-cell">item-31</li>
						<li class="mui-table-view-cell">item-32</li>
						<li class="mui-table-view-cell">item-33</li>
						<li class="mui-table-view-cell">item-34</li>
						<li class="mui-table-view-cell">item-35</li>
						<li class="mui-table-view-cell">item-36</li>
						<li class="mui-table-view-cell">item-37</li>
						<li class="mui-table-view-cell">item-38</li>
						<li class="mui-table-view-cell">item-39</li>
						<li class="mui-table-view-cell">item-40</li>
						<li class="mui-table-view-cell">item-41</li>
						<li class="mui-table-view-cell">item-42</li>
						<li class="mui-table-view-cell">item-43</li>
						<li class="mui-table-view-cell">item-44</li>
						<li class="mui-table-view-cell">item-45</li>
						<li class="mui-table-view-cell">item-46</li>
						<li class="mui-table-view-cell">item-47</li>
						<li class="mui-table-view-cell">item-48</li>
						<li class="mui-table-view-cell">item-49</li>
						<li class="mui-table-view-cell">item-50</li>
					</ul>
				</div>
			</div>
		</div>
		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./query-filter.js'></script>
	</body>

</html>